<template>
  <section class="XnyNumberPicker">
    <el-input
      class="input-picker"
      v-model="innerValue[0]"
      onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
      onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
      :size="$ocean.vaildData(size, config.size)"
    >
      <div slot="append" class="endInputBox">
        <span>-</span>
        <el-input
          slot="append"
          v-model="innerValue[1]"
          onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
          onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"
          onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"
          :size="$ocean.vaildData(size, config.size)"
        ></el-input>
      </div>
    </el-input>
  </section>
</template>

<script>
import config from '../../config'
// 正整数
const positiveIntegerRules =
  "if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
// 浮点数
const doubleRules =
  'if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value'
const doubleRulesblur =
  'if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}'
export default {
  name: 'XnyNumberPicker',
  data() {
    return {
      config,
      positiveIntegerRules,
      innerValue: ['', ''],
      rules: {
        int: {
          onkeyup: positiveIntegerRules,
          onafterpaste: positiveIntegerRules,
          onkeypress: '',
          onblur: '',
        },
        double: {
          onkeyup: doubleRules,
          onafterpaste: '',
          onkeypress: doubleRules,
          onblur: doubleRulesblur,
        },
      },
    }
  },
  props: {
    value: String,
    size: String,
    // 输入框类型 input: 普通 int: 正整数 double: 浮点数
    rulesType: {
      type: String,
    },
  },
  components: {},
  watch: {
    innerValue: {
      handler(val) {
        const str = val.join(',')
        if (str == this.value) return
        this.$emit('input', str)
      },
      deep: true,
    },
    value: {
      handler() {
        this.setValue()
      },
    },
  },
  computed: {},
  methods: {
    setValue() {
      const tempArr = this.value?.split(',')
      if (!tempArr || tempArr.length < 2) return
      this.innerValue = tempArr
    },
  },
  created() {
    this.setValue()
  },
  mounted() {},
}
</script>

<style scoped lang="scss">
.XnyNumberPicker {
  ::v-deep.input-picker {
    height: 100%;
    > input {
      border-color: #dcdfe6;
      border-right: none;
    }
    input {
      text-align: center;
    }

    .el-input-group__append {
      background-color: #fff;
      width: 52%;
      padding: 0;
      height: 28px;
      // border: 1px solid;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;

      .endInputBox {
        // background: red;
        height: 100%;
        border-radius: 8px;

        .el-input {
          height: 100%;
          border-radius: 8px;

          input {
            border: none;
            height: 100%;
            border-radius: 8px;
            width: calc(100% - 9px);
          }
        }
      }
    }
  }
}
</style>
